import React, {Component} from 'react';
import {connect} from 'react-redux';
import Avatar from "@/components/avatar";

import './community.scss';

const bgImg = require('../../images/567.jpg');

class Community extends Component {
  goBack = () => {
    this.props.history.goBack();
  }

  publishArticle = () => {
    this.props.history.push('/community/form');
  }

  render() {
    const {userInfo} = this.props;

    return (
      <div className="community-wrap">
        <div className="header-bg-wrap">
          <div className="top-action">
            <span onClick={this.goBack} className="item">返回</span>
            <span onClick={this.publishArticle} className="item">发动态</span>
          </div>

          <div className="bg-img-wrap">
            <img src={bgImg} alt="" className="bg-img"/>
          </div>

          <div className="user-info-wrap">
            <div className="info-wrap">
              <span className="user-name">{userInfo.username}</span>
              <Avatar size="big" className="mine-avatar" avatar={userInfo.avatar}/>
            </div>
            <p className="user-sign">
              好好学习 天天向上
            </p>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    userInfo: state.userInfo
  }
}

export default connect(mapStateToProps)(Community);
